<template>
	<div>
		<div class="flex items-center text-12px text-#B5B5B5">
			<p v-for="(item, index) in timeItem" :key="index" class="mr-20px"
				:class="{ 'text-#114CEE': selectedTimeItem === item }">
				{{ item }}
			</p>
			<div class="flex items-center">
				<el-date-picker v-model="inputTime" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
					format="YYYY/MM/DD" value-format="YYYY-MM-DD" unlink-panels 
					style="height: 30px;">
					<template #prev-month>
						<el-icon>
							<CaretLeft />
						</el-icon>
					</template>
					<template #next-month>
						<el-icon>
							<CaretRight />
						</el-icon>
					</template>
					<template #prev-year>
						<el-icon>
							<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
								<g stroke-width="1" fill-rule="evenodd">
									<g fill="currentColor">
										<path
											d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" />
									</g>
								</g>
							</svg>
						</el-icon>
					</template>
					<template #next-year>
						<el-icon>
							<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
								<g stroke-width="1" fill-rule="evenodd">
									<g fill="currentColor">
										<path
											d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" />
									</g>
								</g>
							</svg>
						</el-icon>
					</template>
				</el-date-picker>
			</div>
			<div class="ml-10px mr-10px">
				<el-button type="primary" color="#114CEE">查询</el-button>
				<el-button type="primary" color="#ffffff" style="color:#86909C;">重置</el-button>
			</div>
		</div>
		<div class="mt-10px">
			<el-table :data="tableData" style="width: 100%" class="person-spot-history-table">
				<el-table-column type="expand">
					<template #default="props">
						<div class="p-20px bg-#F6F6F6">
							<div class="flex items-center">
								<p>
									<span>订单号：</span>
									<span>{{ props.row.detail.id }}</span>
								</p>
								<img src="/transaction/spot/copy.svg" class="w-16px h-16px ml-10px">
								<p class="ml-20px">
									<span>更新时间：</span>
									<span>{{ props.row.detail.update }}</span>
								</p>
								<p class="ml-20px">
									<span>总交易手续费：</span>
									<span>{{ props.row.detail.commission }}</span>
								</p>
							</div>
							<div class="mt-20px flex items-center ">
								<div class="mr-120px">
									<p class="mb-10px">时间</p>
									<p>{{ props.row.detail.time }}</p>
								</div>
								<div class="mr-120px">
									<p class="mb-10px">成交价</p>
									<p>{{ props.row.detail.tradePrice }}</p>
								</div>
								<div class="mr-120px">
									<p class="mb-10px">成交数量</p>
									<p>{{ props.row.detail.tradeAccount }}</p>
								</div>
								<div class="mr-120px">
									<p class="mb-10px">手续费</p>
									<p>{{ props.row.detail.tradeCommission }}</p>
								</div>
								<div class="mr-120px">
									<p class="mb-10px">成交金额</p>
									<p>{{ props.row.detail.tradeSum }}</p>
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="date" label="日期" />
				<el-table-column prop="coin" label="交易对">
					<template #default="scope">
						<div class="text-12px flex items-center pt-10px pb-10px">
							<span>{{ scope.row.coin }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="methods" label="类型">	
				</el-table-column>
				<el-table-column prop="to" label="方向" :filters="[
					{ text: '买', value: '买' },
					{ text: '卖', value: '卖' }
				]" :filter-multiple="false" filter-class-name="filter-person-spot-history " :filter-method="filterTo">
					<template #filter-icon>
						<el-icon class="ml-6px">
							<CaretBottom />
						</el-icon>
					</template>
					<template #default="scope">
						<div>
							<span class="text-#07B175" v-if="scope.row.to == '买'">{{ scope.row.to }}</span>
							<span class="text-#F34E5F" v-if="scope.row.to == '卖'">{{ scope.row.to }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="avgPrice" label="平均价格" />
				<el-table-column prop="price" label="委托价格" />
				<el-table-column prop="trade" label="成交数量">
					<template #default="scope">
						<div>
							<span v-if="scope.row.trade">
								{{ scope.row.trade }}
							</span>
							<span v-else>
								--
							</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="account" label="委托数量" />
				<el-table-column prop="sum" label="成交额" />
				<el-table-column label="状态" align="right">
					<template #default="scope">
						<div class="cursor-pointer">
							{{ scope.row.status }}
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
const timeItem = ref<any[]>([
	"近1个月", "近3个月", "近1年"
]);

const selectedTimeItem = ref<any>("近1个月");
const inputTime = ref<any>([]);

const tableData = ref<any[]>([
	{
		date: "04-02 12:00:30",
		coin: "BTC/USDT",
		methods: "限价委托",
		to: '买',
		avgPrice: '323.30',
		price: '323.30',
		account: '500.00',
		trade: '',
		sum: "2.60 USDT",
		status: "部分成交",
		detail: {
			id: '25256256253',
			update: '2024-11-20 12:00:00',
			commission: '1202.00USDT',
			time: '2024-11-20 12:00:00',
			tradePrice: '0009',
			tradeAccount: '1202.00 USDT',
			tradeCommission: '1202.00USDT',
			tradeSum: '1202.00 USDT',
		}
	}
])


const filterTo = (value: string, row: any) => {
	return row.to === value
}

</script>
<style lang="scss" scoped>
.person-spot-history-table {
	font-size: 12px;
	// --el-table-border-color:none;
	::v-deep .el-table__cell {
		padding: 0;
	}
}
</style>
<style lang="scss">
.filter-person-spot-history {
	// color: #00000;
	.el-table-filter__list {
		padding: 0;
		.is-active {
			color: #fff;
		}
	}
}
</style>
